<template>
	<div>
		<el-button @click="returnIndex()">返回首页</el-button>
		<div class="row-me row-center margin-top20 margin-bottom20">
			<el-button type="primary" icon="el-icon-back" class="handle-del margin-right10"
				@click="removeChapterQuestion">批量移除
			</el-button>
			<el-button type="primary" icon="el-icon-folder-opened" class="handle-del margin-right10"
				@click="exportVisible = true">
				批量导出
			</el-button>
			<el-input v-model="query.title" placeholder="题干搜索" class="width300 margin-right10"></el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
		</div>
		<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionLibChange">
			<el-table-column type="expand">
				<template slot-scope="props">
					<b>
						<p v-html="props.row.title"></p>
					</b>
					<br />
					<div v-if="props.row.type.value == 0 || props.row.type.value == 1">
						<el-table :data="props.row.optionList" style="width: 100%">
							<el-table-column label="选项" width="50">
								<template slot-scope="scope">{{ option[scope.$index] }}</template>
							</el-table-column>
							<el-table-column label="内容">
								<template slot-scope="scope">
									<p v-html="scope.row.content"></p>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<br />
					<b>
						<p>答案：<span v-html="props.row.answer"></span></p>
					</b>
				</template>
			</el-table-column>

			<!-- 表格头部 -->
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column label="序号" width="55" align="center" type="index"></el-table-column>
			<el-table-column label="题目ID" width="80" align="center">
				<template slot-scope="scope">
					<el-button type="text" @click="openLibraryHandle(scope.$index, scope.row.id)">
						{{ scope.row.id }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="试题" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<p v-html="praseTitle(scope.row.title)"></p>
				</template>
			</el-table-column>
			<el-table-column prop="type.name" width="150" label="题型" align="center"></el-table-column>
			<el-table-column prop="category1" width="150" label="分类" align="center">
				<template slot-scope="scope">
					<span>{{ scope.row.category3 }}/{{ scope.row.category2 }}/{{ scope.row.category1 }}</span>
				</template>
			</el-table-column>
			<el-table-column width="80" label="题目属性" align="center">
				<template slot-scope="{row}">
					<span v-if="row.properType==1">普通题</span>
					<span v-else-if="row.properType==2">作废题</span>
					<span v-else-if="row.properType==3">争议题</span>
					<span v-else-if="row.properType==4">重复题</span>
				</template>
			</el-table-column>
			<el-table-column label="视频管理" width="150" align="center">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" @click="getVideo(scope.row)">
						查看({{ scope.row.videoCount }})
					</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300px" align="center">
				<template slot-scope="scope">
					<el-button type="text" icon="el-icon-edit" @click="moveOne(scope.$index, scope.row)">置顶
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveUp(scope.$index, scope.row)">上移
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveDown(scope.$index, scope.row)">下移
					</el-button>
					<el-button type="text" icon="el-icon-edit" @click="moveMax(scope.$index, scope.row)">置尾
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNumber" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handleLibPageChange"></el-pagination>
		</div>
		<!-- 题库弹出框 -->
		<el-dialog title="题库" :visible.sync="libraryVisible" :append-to-body="true" :lock-scroll="false">
			<el-form inline :model="query2" class="demo-form-inline" label-width="auto">
				<el-form-item>
					<el-select filterable v-model="query2.type" placeholder="题型" clearable class="width260 margin-right10">
						<el-option v-for="sort in typeList" :key="sort.id" :label="sort.name" :value="sort.id"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select filterable v-model="query2.categoryId3" placeholder="章节分类" clearable
						class="width260 margin-right10">
						<el-option v-for="sort in categoryIdThree" :key="sort.id" :label="sort.name" :value="sort.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select filterable v-model="query2.categoryId2" placeholder="模块分类" clearable
						class="width260 margin-right10">
						<el-option v-for="sort in categoryIdTwo" :key="sort.id" :label="sort.name" :value="sort.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select filterable v-model="query2.categoryId1" placeholder="综合分类" clearable
						class="width260 margin-right10">
						<el-option v-for="sort in categoryIdOne" :key="sort.id" :label="sort.name" :value="sort.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="query2.title" placeholder="题干搜索" class="width260 margin-right10"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleSearchT">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-back" class="handle-del margin-right10"
						@click="handleReplaceToLib()">替换当前试题
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-edit" @click="editVisible1 = true">新建试题</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="libraryList" border max-height="500" class="table" ref="multipleTable"
				header-cell-class-name="table-header" @selection-change="handleSelectionLibChange">
				<el-table-column type="expand">
					<template slot-scope="props">
						<b>
							<p v-html="props.row.title"></p>
						</b>
						<br />
						<div v-if="props.row.type.value == 0 || props.row.type.value == 1">
							<el-table :data="props.row.optionList" style="width: 100%">
								<el-table-column label="选项" width="50">
									<template slot-scope="scope">{{ option[scope.$index] }}</template>
								</el-table-column>
								<el-table-column label="内容">
									<template slot-scope="scope">
										<p v-html="scope.row.content"></p>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<br />
						<b>
							<p>答案：<span v-html="props.row.answer"></span></p>
						</b>
					</template>
				</el-table-column>

				<!-- 表格头部 -->
				<el-table-column type="selection" width="55" align="center"></el-table-column>
				<el-table-column label="试题" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<p v-html="praseTitle(scope.row.title)"></p>
					</template>
				</el-table-column>
				<el-table-column prop="type.name" width="100" label="题型" align="center"></el-table-column>
				<el-table-column prop="category1" width="150" label="分类" align="center">
					<template slot-scope="scope">
						<span>{{ scope.row.category3 }}/{{ scope.row.category2 }}/{{ scope.row.category1 }}</span>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query2.pageNumber"
					:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChangeT" :page-size="query2.pageSize"
					:total="pageTotal2" @current-change="handlePageChangeT"></el-pagination>
			</div>
		</el-dialog>

		<!-- 新建试题 -->
		<el-dialog title="新建试题" :visible.sync="editVisible1" width="70%">
			<examQuestions ref="examQuestions"></examQuestions>
		</el-dialog>

		<!-- 视频列表 -->
		<el-dialog title="视频列表" :visible.sync="videoVisible" :modal-append-to-body="false" width="60%">
			<div class="container">
				<div class="margin-bottom20">
					<el-select filterable v-model="videoQuery.type" placeholder="类型" :clearable="true" class="width260">
						<el-option key="0" label="系统上传" value="0"></el-option>
						<el-option key="1" label="用户上传" value="1"></el-option>
					</el-select>
					<el-select v-model="videoQuery.properType" placeholder="请选择题目属性" clearable class="margin-right30 width260">
						<el-option label="普通题" :value="1"></el-option>
						<el-option label="作废题" :value="2"></el-option>
						<el-option label="争议题" :value="3"></el-option>
						<el-option label="重复题" :value="4"></el-option>
					</el-select>
					</el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="handleSearchVideo">搜索
					</el-button>
				</div>
				<el-table :data="videoData" border class="table" header-cell-class-name="table-header-style">
					<el-table-column prop="createBy" label="用户名" align="center"></el-table-column>
					<el-table-column label="缩略图">
						<template slot-scope="scope">
							<el-image style="max-height: 50px;max-width:50px;width: auto;" class="table-td-thumb"
								:src="scope.row.thumbnail" :preview-src-list="[scope.row.thumbnail]"></el-image>
						</template>
					</el-table-column>
					<el-table-column prop="url" label="视频地址" align="center">
						<template slot-scope="scope">
							<a :href="scope.row.url" target="_blank">点击查看</a>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
				</el-table>
				<div class="margin-top10">
					<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]"
						@size-change="handleVideoSizeChange" :current-page="videoQuery.pageNumber" :total="videoPageTotal"
						@current-change="handleVideoPageChange"></el-pagination>
				</div>
			</div>
		</el-dialog>

		<!--编辑导出试题-->
		<el-dialog title="编辑导出内容" :visible.sync="exportVisible" :modal-append-to-body="false" width="40%">
			<el-form ref="form" label-width="80px">
				<el-form-item label="题目类型">
					<el-radio-group v-model="form.type">
						<el-radio v-for="(type, index) in types" :key="index" :label="type.id">{{ type.name }}</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="导出数量" label-width="80px">
					<el-input v-model="form.pageSize"></el-input>
				</el-form-item>
				<el-form-item label="随机">
					<el-switch v-model="form.ran" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
				</el-form-item>
				<el-button @click="exportQuestionBtn">导出</el-button>
				<el-button @click="exportVisible = false">取消</el-button>
			</el-form>
		</el-dialog>

		<batchExport ref="batchExport"></batchExport>
	</div>
</template>

<script>
	import batchExport from "@/components/batchExport"
	import examQuestions from "@/components/examQuestions"
	export default {
		props: ['selectedNodeName', 'categoryIdOne', 'categoryIdTwo', 'categoryIdThree', 'typeList', 'chapterId'],
		components: {
			examQuestions,
			batchExport
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				query2: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				exportVisible: false,
				multipleLibSelection: [],
				tableData: [],
				option: ['A', 'B', 'C', 'D', 'E', 'F'],
				libraryVisible: false,
				form: {},
				libraryList: [],
				pageTotal2: 0,
				editVisible1: false,
				videoVisible: false,
				videoQuery: {
					pageNumber: 1,
					pageSize: 30
				},
				videoPageTotal: 0,
				videoData: [],
				types: []
			}
		},
		mounted() {
			this.query.chapterId = this.chapterId
			this.getData()
			this.getType()
		},
		methods: {
			//批量导出
			async exportQuestionBtn() {
				const res = await this.$post(
					`/admin/chapter/getQuestionsByChapterId?pageNumber=1&pageSize=${this.form.pageSize?this.form.pageSize:99999}&chapterId=${this.query.chapterId}`,
					this.form)
				if (res.code == 1000) {
					this.exportVisible = false
					this.$refs.batchExport.show(1, res.data.list)
				}
			},
			async getType() {
				const res = await this.$get('/admin/chapter/getType', {
					chapterId: this.query.chapterId
				})
				if (res.code == 1000) {
					this.types = res.data.list;
				}
			},
			//列表时过滤富文本
			praseTitle(title) {
				var reg = /&nbsp;/g;
				title = title.replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g, '').replace(reg, '');
				return title;
			},
			// 视频列表搜索
			handleSearchVideo() {
				this.videoQuery.pageNumber = 1
				this.getVideoData();
			},
			getVideo(row) {
				this.videoQuery.questionId = row.id
				this.getVideoData()
			},
			async getVideoData() {
				const res = await this.$get('/admin/questionVideo/getQuestionVideo', this.videoQuery)
				if (res.code == 1000) {
					this.videoData = res.data.list
					this.videoPageTotal = res.data.totalRow
					this.videoVisible = true
				}
			},
			//返回
			returnIndex() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.$emit('handleReturn')
			},
			//置顶
			moveOne(index, row) {
				var vm = this;
				this.$get('/admin/chapter/moveOne', {
						chapterId: vm.query.chapterId,
						questionId: row.id,
						type: row.type.value
					})
					.then(function(response) {
						if (response.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.handleSearch();
					});
			},
			//上移
			moveUp(index, row) {
				var vm = this;
				this.$get('/admin/chapter/moveUpQuestion', {
						chapterId: vm.query.chapterId,
						questionId: row.id,
						type: row.type.value
					})
					.then(function(response) {
						if (response.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.handleSearch();
					});
			},
			//下移
			moveDown(index, row) {
				var vm = this;
				this.$get('/admin/chapter/moveDownQuestion', {
						chapterId: vm.query.chapterId,
						questionId: row.id,
						type: row.type.value
					})
					.then(function(response) {
						if (response.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.handleSearch();
					});
			},
			//置尾
			moveMax(index, row) {
				var vm = this;
				this.$get('/admin/chapter/moveMax', {
						chapterId: vm.query.chapterId,
						questionId: row.id,
						type: row.type.value
					})
					.then(function(response) {
						if (response.code != 1000) {
							vm.$message.error('服务异常');
							return;
						}
						vm.handleSearch();
					});
			},
			handleSizeChangeT(val) {
				this.query2.pageSize = val
				this.getLibraryData1();
			},
			handlePageChangeT(val) {
				this.query2.pageNumber = val
				this.getLibraryData1();
			},
			handleVideoSizeChange(val) {
				this.videoQuery.pageSize = val
				this.getVideoData();
			},
			handleVideoPageChange(val) {
				this.videoQuery.pageNumber = val
				this.getVideoData();
			},
			//替换试题
			async handleReplaceToLib() {
				var questionIdNew = this.multipleLibSelection[0].id;
				const res = await this.$postForm('/admin/chapter/replaceQuestions', {
					chapterId: this.query.chapterId,
					questionIdNew: questionIdNew,
					questionIdOld: this.form.questionIdOld
				})
				if (res.code != 1000) {
					this.$message.error('替换试题重复');
					return;
				}
				this.$message.success('添加成功');
				this.libraryVisible = false;
				this.handleSearch();
			},
			handleSearchT() {
				this.query2.pageNumber = 1
				this.getLibraryData1();
			},
			async getLibraryData1() {
				var vm = this;
				this.$get('/admin/chapter/getChapterQuestions', this.query2)
					.then(function(response) {
						if (response.code != 1000) {
							vm.$message.error('搜索服务异常');
							return;
						}
						vm.libraryList = response.data.list;
						vm.pageTotal2 = response.data.totalRow;
					});

			},
			openLibraryHandle(index, row) {
				this.libraryVisible = true;
				//获取搜索栏检索信息
				this.form.questionIdOld = row;
				this.getLibraryData1();
			},
			handleSelectionLibChange(val) {
				this.multipleLibSelection = val;
			},
			//分页导航
			handleLibPageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			async getData() {
				const res = await this.$post(`/admin/chapter/getQuestionsByChapterId?${this.$.getParamsString(this.query)}`)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData()
			},
			//批量删除章节内试题
			removeChapterQuestion() {
				var vm = this;
				// 二次确认添加
				this.$confirm('确定要从【' + vm.selectedNodeName + '】中移除所选吗？', '提示', {
						type: 'warning'
					})
					.then(() => {
						//构建ID数组
						let ids = Array.from(this.multipleLibSelection, ({
							id
						}) => id)
						vm.$post('/admin/chapter/removeQuestions?chapterId=' + vm.query.chapterId,
								ids)
							.then(function(response) {
								if (response.code != 1000) {
									vm.$message.error('搜索服务异常');
									return;
								}
								vm.$message.success('移除成功');
								vm.getData();
							});
					})
					.catch(() => {});
			},
		}
	}
</script>

<style>
</style>